<div *ngIf="company" class="row">
    <div class="col-md-8 h-100">
        <h4>Research and Ratings</h4>
        <div class="row">
            <div class="col-md-4 col-6 h-100">
                <app-research-overview *ngIf="ratingModels && ratingModels.riskRating" [company]="company" [ratingModel]="ratingModels.riskRating"
                [hasAccess]="productPermissions?.riskrating && company.hasRiskRatingAccountFeature" [state]="riskResearchState" [route]="getRoute('risk')"></app-research-overview>
            </div>

            <div class="col-md-4 col-6 h-100">
                <app-research-overview *ngIf="ratingModels && ratingModels.esgRating" [company]="company" [ratingModel]="ratingModels.esgRating"
                [hasAccess]="productPermissions?.esg && company.hasEsgAccountFeature" [state]="esgResearchState" [route]="getRoute('esg')"></app-research-overview>
            </div>

            <div class="col-md-4 col-6 h-100">
                <app-research-overview *ngIf="ratingModels && ratingModels.controversyRating" [company]="company" [ratingModel]="ratingModels.controversyRating"
                [hasAccess]="productPermissions?.controversies && company.hasControversiesAccountFeature" [state]="company.controversyResearchState" [route]="getRoute('controversies')"></app-research-overview>
            </div>

            <div class="col-md-4 col-6 h-100">
                <app-research-overview *ngIf="ratingModels && ratingModels.cgRating" [company]="company" [ratingModel]="ratingModels.cgRating"
                [hasAccess]="productPermissions?.governance && company.hasGovernanceAccountFeature" [state]="company.corporateGovernanceResearchState" [route]="getRoute('governance')"></app-research-overview>
            </div>
            
            <div class="col-md-4 col-6 h-100">
                <app-research-overview *ngIf="ratingModels && ratingModels.spRating" [company]="company" [ratingModel]="ratingModels.spRating" [hasDownloadIcon]="hasActiveSustainableAssessments"
                [hasAccess]="productPermissions?.sustainableproducts && company.hasSPAccountFeature" [state]="company.sustainableProductsResearchState" [route]="getRoute('sustainableProducts')"></app-research-overview>
            </div>

            <div class="col-md-4 col-6 h-100">
                <app-research-overview *ngIf="ratingModels && ratingModels.piRating" [company]="company" [ratingModel]="ratingModels.piRating" [hasDownloadIcon]="hasActiveInvolvedAssessments"
                [hasAccess]="productPermissions?.productinvolvement && company.hasPIAccountFeature" [state]="company.productInvolvementResearchState" [route]="getRoute('productInvolvement')"></app-research-overview>
            </div>

            <div class="col-md-4 col-6 h-100">
                <app-research-overview *ngIf="ratingModels && ratingModels.gcRating" [company]="company" [ratingModel]="ratingModels.gcRating"
                [hasAccess]="productPermissions?.globalcompact && company.hasGCCSAccountFeature" [state]="company.gccsResearchState" [route]="getRoute('globalcompact')"></app-research-overview>
            </div>
        </div>

        <h4 class="mt-5">Business Description</h4>
        <div class="card shadow card-body">
            <div class="row">
                <div class="col-md-8">
                    <p>{{ company.businessDescription }}</p>
                </div>
                <div class="col-md-4">
                    <h5>Industry</h5>
                    <p>{{ company.peerGroup }}</p>

                    <h5>SubIndustry</h5>
                    <p>{{ company.subPeerGroup }}</p>

                    <h5>Full Time Employees</h5>
                    <p>{{ (company.totalEmployees | number) || 'No Data Available' }}</p>

                    <div *ngIf="company.address && company.address !== 'NA'">
                        <h5>Headquarters</h5>
                        <p class="mb-0">{{ company.address }}</p>
                        <p *ngIf="company.website"><a href="{{ company.website }}" target="_blank" class="text-link">{{ company.website }}</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4 h-100">
        <h4>Latest News and Alerts</h4>
        <div class="card shadow">
            <div class="card-body news-container">
                <div *ngIf="companyNews && companyNews.length > 0">
                    <div *ngFor="let item of companyNews" class="newsEvents">
                            <a href="{{ item.externalUrl }}" target="_blank" class="text-link">{{ item.headline }}</a>
                            <p class="text-body-light">{{ item.publicationDate | date:'mediumDate' }} | {{ item.source }}</p>

                            <a [routerLink]="['/news', item.id]" class="text-body text-link">{{ item.name }}</a>
                            <div class="text-body-light">{{ item.startDate | date:'mediumDate' }}</div>
                        </div>
                    </div>
                <div *ngIf="!companyNews || companyNews.length === 0" class="text-center align-self-center">
                    <img src="/assets/icons-svg/icon-news.svg" width="64" height="50" />
                    <div class="my-3">No news feed at this time</div>
                </div>
            </div>
        </div>
    </div>
</div>